<template>
  <div>
    <div>
      <van-nav-bar @click-left="$router.push('/index')" title="个人信息">
        <template #left>
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </template>
      </van-nav-bar>
      <ul>
        <li>
          <van-cell is-link title="头像" @click="show = true">
            <template #default>
              <img :src="list.avatar" alt="" />
            </template>
          </van-cell>
          <van-action-sheet
            v-model="show"
            :actions="actions"
            @select="onSelect"
            @open="onopen"
          />
        </li>
        <li>
          <p>昵称</p>
          <p>{{ list.nickname }}</p>
        </li>
        <li>
          <p>手机号</p>
          <p>{{ list.mobile }}</p>
        </li>
        <li>
          <p>性别</p>
          <p>{{ list.sex == 0 ? "男" : "女" }}</p>
        </li>
        <li>
          <p>出生日期</p>
          <p>{{ list.birthday }}</p>
        </li>
        <li>
          <p>所在城市</p>
          <p>
            {{ list.province_name }},{{ list.city_name }},{{
              list.district_name
            }}
          </p>
        </li>
        <li>
          <p>学科</p>
          <p></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { userInfo } from "../../request/http";
export default {
  data() {
    return {
      list: [],
      show: false,
      actions: [{ name: "拍照" }, { name: "从手机相册中选择" }, { name: "取消" }],
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
    //   this.show = false;
    //   Toast(item.name);
    },
    onopen(){

    },
  },
  created() {
    userInfo().then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  background: #fff;
  margin: 0.533rem 0;
  padding: 0 0.8rem;
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    img {
      width: 1.067rem;
      height: 1.067rem;
      border-radius: 50%;
      vertical-align: middle;
    }
    p {
      font-size: 0.4rem;
      color: #595959;
    }
  }
}
</style>